{% extends 'base.html' %}

{% block javascript %}
<script>

  function loadConfig() {
     /* Loads a device config. */
     console.log("Loading config")
     var uuid = $("#config_uuid").val()
     console.log("uuid = " + uuid)

     // Send create event request to endpoint
     $.ajax({
         url: "/api/config/device/" + uuid + "/load/",
         type: "POST",
         data: {
           "csrfmiddlewaretoken": "{{ csrf_token }}"
         },
         dataType: 'json',
         success: function(data) {
           console.log("Event request succeeded")
           message = data["message"]
           alert(message);
           location.reload();
         },
         error: function(data) {
           console.log("Event request failed")
           response_dict = JSON.parse(data.responseText)
           message = response_dict["message"]
           alert(message);
         }
     }); 
  }

</script>
{% endblock %}

{% block content %}

{% csrf_token %}

<html>
  <body>
    <div class="config">
      <h2>Device Configuration</h2>
      <div class="card" style="width: 33%;">
        <p>
        <b>Current Config:</b> {{ current_config_name }}
        </p>
        <b> Set New: </b>
        <select id="config_uuid">
          {% for config in configs %}
            {% if config.uuid == selected_config.uuid %}
              <option value="{{ config.uuid }}" selected="selected"> Recipe: {{ config.name }} </option>
            {% else %}
              <option value="{{ config.uuid }}"> Config: {{ config.name }} </option>
            {% endif %}
          {% endfor %}
        </select>

        <button class="btn" type="button" onClick="loadConfig()"><i class="icon-share"></i> Load Config </button>
      </div>
    </div>
  </body>
</html>
  
{% endblock %}
